'use client'

import React, { useState, useEffect } from 'react'
import { 
  Layout, 
  Button, 
  Space, 
  Avatar, 
  Dropdown, 
  Typography, 
  Row, 
  Col, 
  message 
} from 'antd'
import {
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
  ShopOutlined
} from '@ant-design/icons'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { STORAGE_KEYS } from '@/utils/constants'

const { Header: AntHeader } = Layout
const { Title } = Typography

interface User {
  id: number
  username: string
  userType: string
  avatarUrl?: string
}

export default function AdminHeader() {
  const [user, setUser] = useState<User | null>(null)
  const router = useRouter()

  useEffect(() => {
    // 检查登录状态
    const token = localStorage.getItem(STORAGE_KEYS.TOKEN)
    const userStr = localStorage.getItem(STORAGE_KEYS.USER)
    
    if (token && userStr) {
      try {
        const userData = JSON.parse(userStr)
        // 检查用户是否为管理员
        if (userData.userType !== 'ADMIN') {
          message.error('无管理员权限')
          router.push('/')
          return
        }
        setUser(userData)
      } catch (error) {
        console.error('Parse user data error:', error)
        logout()
      }
    } else {
      // 未登录跳转到登录页
      router.push('/login')
    }
  }, [router])

  const logout = () => {
    localStorage.removeItem(STORAGE_KEYS.TOKEN)
    localStorage.removeItem(STORAGE_KEYS.USER)
    setUser(null)
    message.success('已退出登录')
    router.push('/login')
  }

  const userMenuItems = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人资料'
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '系统设置'
    },
    {
      key: 'divider',
      type: 'divider' as const
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: logout
    }
  ]

  return (
    <AntHeader style={{ 
      background: '#001529', 
      padding: '0 24px',
      position: 'sticky',
      top: 0,
      zIndex: 1000,
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
    }}>
      <Row justify="space-between" align="middle" style={{ height: '100%' }}>
        <Col>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Link href="/admin" style={{ textDecoration: 'none' }}>
              <Title level={3} style={{ 
                color: 'white', 
                margin: 0, 
                fontSize: '20px'
              }}>
                🐟 管理后台
              </Title>
            </Link>
          </div>
        </Col>
        
        <Col>
          <Space size="large">
            {user ? (
              <>
                <Dropdown 
                  menu={{ items: userMenuItems }}
                  placement="bottomRight"
                >
                  <Space style={{ cursor: 'pointer', color: 'white' }}>
                    <Avatar 
                      src={user.avatarUrl} 
                      icon={<UserOutlined />}
                      size="small"
                    />
                    <span>{user.username}</span>
                  </Space>
                </Dropdown>
              </>
            ) : (
              <Space>
                <Link href="/login">
                  <Button type="text" icon={<UserOutlined />} style={{ color: 'white' }}>
                    登录
                  </Button>
                </Link>
              </Space>
            )}
          </Space>
        </Col>
      </Row>
    </AntHeader>
  )
}